<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">WMS</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Task</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Pick Task Separate</a>
        </li>
    </ul>
</div>
<div ng-show="isLoading" class="text-center">
    <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
</div>
<div class="portlet light bordered" ng-show="!isLoading" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold"> Pick Task: {{task.id}}  </span>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <div class="form-group">
            <div class="col-md-12">
                <b>Order</b>:
                <span ng-repeat="orderId in task.orderIds">
                    <a ng-href="{{'#/wms/outbound/order/' + orderId}}" target="_blank">{{orderId}}</a>
                </span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-3"><b>Pick Type</b>: {{task.pickType}}</div>
            <div class="col-md-3"><b>Pick Way</b>: {{task.pickWay}}</div>
            <div class="col-md-3"><b>Status</b>: {{task.status}}</div>
            <div class="col-md-3"><b>Priority</b>: {{task.priority}}</div>
        </div>
        <div class="form-group">
            <div class="col-md-3"><b>Is Rush</b>: {{task.isRush}}</div>
            <span class="col-md-3">
                <b>Assignee:</b> {{task.assignee.firstName}} {{task.assignee.lastName}}
            </span>
            <span class="col-md-3">
                <b>Planned Assignee:</b>{{task.plannedAssignee.firstName}} {{task.plannedAssignee.lastName}}
            </span>
        </div>
        <div class="form-group">
            <span class="col-md-3"><b>Start Time: </b>{{task.startTime | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}</span>
            <span class="col-md-3"><b>End Time: </b>{{task.endTime | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}</span>
            <span class="col-md-3"><b>Create Time: </b>{{task.createdWhen | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                                &nbsp;<span ng-show="task.createdBy">({{task.createdBy}})</span></span>
            <span class="col-md-3"><b>Updated Time: </b>{{task.updatedWhen | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
                                &nbsp;<span ng-show="task.updatedBy">({{task.updatedBy}})</span></span>
        </div>
        <div class="form-group"  style="margin-bottom: 30px;">
            <div class="col-md-12">
                <b>Description:</b> {{task.description}}
            </div>
        </div>
        <div class="table-scrollable">
            <table class="table table-striped table-hover">
                <tr style="background: rgb(176, 193, 216);">
                    <th> Item </th>
                    <th> Title </th>
                    <th> Unit </th>
                    <th> Location </th>
                    <th> QTY </th>
                    <th> Remain QTY </th>
                </tr>
                <tr ng-repeat="itemLine in task.pickItemLines" >
                    <td>{{itemLine.itemSpecName}}</td>
                    <td>{{itemLine.titleName}}</td>
                    <td>{{itemLine.unitName}}</td>
                    <td>{{itemLine.locationName}}</td>
                    <td>{{itemLine.qty}}</td>
                    <td>{{itemLine.remain_qty}}</td>
                </tr>
            </table>
        </div>
        <div style="margin: 50px 0px 10px;">
            <span style="font-weight: 600; font-size: 15px; line-height: 34px;">Separate Tasks</span>
            <button type="button" class="btn default" ng-click="addSeparateTask()"
                    style="background-color:rgb(176, 193, 216);
                    border-color: rgb(176, 193, 216);
                    float:right;">add Separate Task</button>
            <div class="clear:both;"></div>
        </div>
        <div ng-show="showAddTaskWarnning" class="custom-alerts alert alert-danger fade in">
            <i class="fa-lg fa fa-warning"></i>Please add separate task!
        </div>
        <form name="editForm" ng-submit="editForm.$valid && saveSeparateTasks()">
            <div class="portlet light bordered" ng-repeat="separateTask in separateTasks"  ng-init="separateTaskIndex = $index"
                 style="border:2px solid rgba(194, 202, 214, 0.7) !important; padding-top:20px; padding-bottom:18px;">
                <div  style="text-align: right;  font-size: 15px;">
                    <a href="javascript:;" class="btn btn-circle btn-outline dark" ng-click="deleteSeparateTask($index)">
                        <i class="fa icon-trash"></i> Delete </a>
                </div>
                <div ng-show="separateTaskWarnings[separateTaskIndex]" class="custom-alerts alert alert-danger fade in">
                    <i class="fa-lg fa fa-warning"></i>Please fill in qty of the itemLine!
                </div>
                <div class="table-scrollable">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th> Item </th>
                            <th> Title </th>
                            <th> Unit </th>
                            <th> Location </th>
                            <th> QTY </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="itemLine in separateTask.itemLines" ng-init="itemLineIndex = $index">
                            <td>{{itemLine.itemSpecName}}</td>
                            <td>{{itemLine.titleName}}</td>
                            <td>{{itemLine.unitName}}</td>
                            <td>{{itemLine.locationName}}</td>
                            <td>
                                <input type="number" ng-model="itemLine.qty"
                                       ng-change="updateRemainQtyAndCheckIsValidQty(separateTaskIndex, itemLineIndex, itemLine.qty)"
                                       ng-class="{ 'pick-task-location-qty-full': qtyIsNotEffect[separateTaskIndex][itemLineIndex]}"/>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="form-group form-actions right">
                <waitting-btn type="submit" btn-class="btn blue"
                              value="'Save'" is-loading="isSaveloading"></waitting-btn>
                <button type="button" class="btn default" ng-click="cancel(editForm)">Cancel</button>
            </div>
        </form>
    </div>
</div>




